<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      Vue 生命周期： Vue实例从创建到销毁的过程

        创建 => 更新 => 销毁

        vue给每个阶段都提供了一些方法（钩子函数、钩子方法）

        创建阶段： beforeCreate()
                  created()     ----- 以后所有的 ajax 方法全部在里面执行
                  beforeMount()
                  mounted()     ----- 以后如果想获取 DOM 元素，必须在这个钩子函数中执行

        更新阶段： beforeUpdate()
                  updated()

        销毁阶段： beforeDestory()
                  destory()

    
      1. 学习生命周期的意义：有助于理解 Vue 实例的运行方式、完成更复杂的功能、分析错误原因等

      2. 实例的生命周期：Vue 实例从被创建到挂载到页面中运行，再到不用时卸载、销毁的过程
                  
      3. 钩子函数： 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，这些方法是 Vue 给提供的
              
      4. Vue 生命周期经过 3 个阶段： 创建、更新、销毁

    </pre>

		<div id="root">
			<div class="box">
				<h5>{{ msg }}</h5>
			</div>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 1. new Vue() 开始创建 vue 实例
			var vm = new Vue({
				el: '#root',
				data: {
					msg: 'Tom',
				},
				methods: {
					handle() {
						console.log('Jerry')
					},
				},
				beforeCreate() {
					// 在这个阶段，创建了一个空的 Vue 实例对象，这时候，只有钩子函数、以及默认的方法能够被调用
					// 注意：在这个阶段，是不能够访问 data 中的数据，以及自定义事件
					// console.log(this.msg) // undefined
					// this.handle() // 报错
				},
				created() {
					// ★
					// 在这个阶段，data 以及 methods 中的方法已经被初始化完成，这时候可以进行调用
					// 注意：在实际开发中，如果想最早的获取到后台的数据，也就是调用 ajax ，最早就应该在 created
					// console.log(this.msg) // Tom
					// this.handle() // Jerry
				},
				beforeMount() {
					// 在这个阶段 Vue 在编译、解析模板
					// 在这个阶段，Vue 开始对模板进行编译、解析，将 数据 和 模板中使用的位置开始进行连接
					// 在内存中生成一个模板字符串，生成一个 DOM 结构，
					// 但是需要注意：是内存中生成的，还没有渲染到浏览器中
					console.log(document.querySelector('h5')) // <h5>{{ msg }}</h5>
				},
				mounted() {
					// ★
					// 到这个阶段，就已经把内存中生成的 DOM 替换到页面中，这时候可以进行DOM操作
					// 操作 DOM 最早的位置就在 mounted 中
					// 到这个阶段，Vue 创建阶段就已经完成了，Vue 模板全部解析完毕，数据 和 模板完成结合，生成页面
					console.log(document.querySelector('h5')) // <h5>Tom</h5>
				},
				beforeUpdate() {},
				updated() {},
			})
		</script>
	</body>
</html>
